<template>
  <div class="page-content">
    <div class="header">
      <h3>驾校设置</h3>
    </div>

    <el-form label-width="95px" style="margin-top: 20px">
      <el-form-item label="驾校名称：">
        <el-input v-model="sys.name" :disabled="!isEdit" />
      </el-form-item>
      <el-form-item label="联系人：">
        <el-input v-model="sys.username" :disabled="!isEdit" />
      </el-form-item>
      <el-form-item label="联系电话：">
        <el-input v-model="sys.phone" :disabled="!isEdit" />
      </el-form-item>
      <el-form-item label="联系地址：">
        <el-input v-model="sys.address" :disabled="!isEdit" />
      </el-form-item>
      <!-- 主图部分 -->
      <el-form-item label="主图：">
        <el-upload action="#" list-type="picture-card" :auto-upload="false">
          <el-icon>
            <Plus />
          </el-icon>

          <template #file="{ file }">
            <div>
              <img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
              <span class="el-upload-list__item-actions">
                <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
                  <el-icon><zoom-in /></el-icon>
                </span>
                <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleDownload(file)">
                  <el-icon>
                    <Download />
                  </el-icon>
                </span>
                <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleRemove(file)">
                  <el-icon>
                    <Delete />
                  </el-icon>
                </span>
              </span>
            </div>
          </template>
        </el-upload>

        <el-dialog v-model="dialogVisible" :close-on-click-modal="false">
          <img w-full :src="dialogImageUrl" alt="Preview Image" />
        </el-dialog>
      </el-form-item>
      <!-- end主图部分 -->
      <!-- 轮播图部分 -->
      <el-form-item label="轮播图：">
        <el-upload action="#" list-type="picture-card" :auto-upload="false">
          <el-icon>
            <Plus />
          </el-icon>

          <template #file="{ file }">
            <div>
              <img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
              <span class="el-upload-list__item-actions">
                <span class="el-upload-list__item-preview" @click="handlePictureCardPreview_banner(file)">
                  <el-icon><zoom-in /></el-icon>
                </span>
                <span v-if="!disabled_banner" class="el-upload-list__item-delete" @click="handleDownload_banner(file)">
                  <el-icon>
                    <Download />
                  </el-icon>
                </span>
                <span v-if="!disabled_banner" class="el-upload-list__item-delete" @click="handleRemove_banner(file)">
                  <el-icon>
                    <Delete />
                  </el-icon>
                </span>
              </span>
            </div>
          </template>
        </el-upload>

        <el-dialog v-model="dialogVisible" :close-on-click-modal="false">
          <img w-full :src="dialogImageUrl" alt="Preview Image" />
        </el-dialog>
      </el-form-item>
      <!-- end轮播图部分 -->
      <!-- 宣传视频部分 -->
      <el-form-item label="宣传视频：">
        <el-upload action="#" list-type="picture-card" :auto-upload="false">
          <el-icon>
            <Plus />
          </el-icon>

          <template #file="{ file }">
            <div>
              <img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
              <span class="el-upload-list__item-actions">
                <span class="el-upload-list__item-preview" @click="handlePictureCardPreview_video(file)">
                  <el-icon><zoom-in /></el-icon>
                </span>
                <span v-if="!disabled_video" class="el-upload-list__item-delete" @click="handleDownload_video(file)">
                  <el-icon>
                    <Download />
                  </el-icon>
                </span>
                <span v-if="!disabled_banner" class="el-upload-list__item-delete" @click="handleRemove_video(file)">
                  <el-icon>
                    <Delete />
                  </el-icon>
                </span>
              </span>
            </div>
          </template>
        </el-upload>

        <el-dialog v-model="dialogVisible" :close-on-click-modal="false">
          <img w-full :src="dialogImageUrl" alt="Preview Image" />
        </el-dialog>
      </el-form-item>
      <!-- end宣传视频部分 -->
      <el-form-item label="驾校面积：">
        <el-input v-model="sys.area" :disabled="!isEdit" />
      </el-form-item>
      <el-form-item label="教练数：">
        <el-input v-model="sys.clnum" :disabled="!isEdit" />
      </el-form-item>
      <el-form-item label="配套设施：">
        <div>
          <el-checkbox v-model="checked1" label="空调" size="large" />
          <el-checkbox v-model="checked2" label="宿舍" size="large" />
          <el-checkbox v-model="checked3" label="员工餐" size="large" />
          <el-checkbox v-model="checked4" label="员工餐2" size="large" />
          <el-checkbox v-model="checked5" label="员工餐3" size="large" />
          <el-checkbox v-model="checked6" label="员工餐4" size="large" />
        </div>
      </el-form-item>
      <!-- 驾校简介 -->
      <el-form-item label="驾校简介：" style="width: 100%;">
        <Editor v-model="editorHtml" />
      </el-form-item>
      <!-- end驾校简介 -->
      <el-form-item>
        <el-button type="primary" style="width: 90px" v-ripple @click="edit">
          {{ isEdit ? '保存' : '编辑' }}
        </el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { Delete, Download, Plus, ZoomIn } from '@element-plus/icons-vue'
import type { UploadFile } from 'element-plus'

const dialogImageUrl = ref('')
const dialogVisible = ref(false)
const disabled = ref(false)
const dialogImageUrl_banner = ref('')
const dialogVisible_banner = ref(false)
const disabled_banner = ref(false)
const dialogImageUrl_video = ref('')
const dialogVisible_video = ref(false)
const disabled_video = ref(false)
//配套措施
const checked1 = ref(true)
const checked2 = ref(false)
const checked3 = ref(false)
const checked4 = ref(false)
const checked5 = ref(false)
const checked6 = ref(false)
//富文本编辑器
const editorHtml = ref(`<h1>欢迎使用富文本编辑器</h1>
    <p>这是一个段落示例，下面展示了一些常用的富文本格式：</p>
    
    <h2>文本样式</h2>
    <p><strong>这是加粗的文字</strong></p>
    <p><em>这是斜体文字</em></p>
    
    <h2>列表示例</h2>
    <ul>
      <li>无序列表项 1</li>
      <li>无序列表项 2</li>
      <li>无序列表项 3</li>
    </ul>
    
    
    <ol>
      <li>有序列表项 1</li>
      <li>有序列表项 2</li>
      <li>有序列表项 3</li>
    </ol>
    
    <h2>引用示例</h2>
    <blockquote style="border-left: 4px solid #ccc; margin-left: 0; padding-left: 1em;">
      这是一段引用文字，可以用来突出显示重要内容。
    </blockquote>
    
    <h2>表格示例</h2>
    <table border="1" cellpadding="5">
      <tr>
        <th>表头 1</th>
        <th>表头 2</th>
      </tr>
      <tr>
        <td>单元格 1</td>
        <td>单元格 2</td>
      </tr>
    </table>
  `)

const sys = reactive({
  name: '张三驾校',
  username: '张三',
  phone: '13397113696',
  address: '湖北省武汉市',
  imageurl: 'https://qcloud.dpfile.com/pc/wbgTlt3YZ1GFlun1Td49S7xkS_f9unM1qSqCD9tkGAsLny8PcuWNnkiBsh18aMLo.jpg',
  area: '100m²',
  jlnum: '10名',
  clnum: '100辆'
})
const checkList = reactive(['.jpg', '.png', '.mp4', '.rm', '.doc', '.docx', '.xls'])
const isEdit = ref(false)

const edit = () => {
  isEdit.value = !isEdit.value
}
//图片上传功能
//主图部分上传
const handleRemove = (file: UploadFile) => {
  console.log(file)
}

const handlePictureCardPreview = (file: UploadFile) => {
  dialogImageUrl.value = file.url!
  dialogVisible.value = true
}

const handleDownload = (file: UploadFile) => {
  console.log(file)
}
//轮播图部分上传
const handleRemove_banner = (file: UploadFile) => {
  console.log(file)
}

const handlePictureCardPreview_banner = (file: UploadFile) => {
  dialogImageUrl.value = file.url!
  dialogVisible.value = true
}

const handleDownload_banner = (file: UploadFile) => {
  console.log(file)
}
//宣传视频上传
const handleRemove_video = (file: UploadFile) => {
  console.log(file)
}

const handlePictureCardPreview_video = (file: UploadFile) => {
  dialogImageUrl.value = file.url!
  dialogVisible.value = true
}

const handleDownload_video = (file: UploadFile) => {
  console.log(file)
}
</script>

<style lang="scss" scoped>
.page-content {
  width: 100%;
  height: 100%;

  .header {
    padding-bottom: 15px;
    border-bottom: 1px solid var(--art-border-color);

    h3 {
      font-size: 18px;
      font-weight: 500;
    }
  }

  :deep(.el-form) {
    .el-form-item {
      max-width: 1000px;
    }
  }
}

.viewfor {
  margin-left: 1rem;
}
</style>